<template>
  <div class="flight-info">
    <el-splitter>
      <el-splitter-panel size="70%">
        <el-card>
          <el-form :model="form" size="small" label-width="90px" class="flight-form">
            <el-row :gutter="12">
              <el-col :span="6">
                <el-form-item label="进港航班">
                  <el-input v-model="form.inboundFlight" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="性质">
                  <el-select v-model="form.nature" placeholder="请选择">
                    <el-option label="国内" value="domestic" />
                    <el-option label="国际" value="international" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="航班号">
                  <el-input v-model="form.flightNo" placeholder="航班号" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="航空公司">
                  <el-select v-model="form.airline" placeholder="请选择">
                    <el-option label="顺丰航空" value="sf" />
                    <el-option label="其他航空" value="other" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="12">
              <el-col :span="6">
                <el-form-item label="航线">
                  <el-input v-model="form.route" placeholder="例：SZX-PEK" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="进港时间">
                  <el-time-picker
                    v-model="form.inTime"
                    placeholder="请选择时间"
                    :format="'HH:mm'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="起飞时间">
                  <el-time-picker
                    v-model="form.depTime"
                    placeholder="请选择时间"
                    :format="'HH:mm'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="回港时间">
                  <el-time-picker
                    v-model="form.returnTime"
                    placeholder="请选择时间"
                    :format="'HH:mm'"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="12">
              <el-col :span="6">
                <el-form-item label="机号">
                  <el-input v-model="form.regNo" placeholder="机号" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="机型">
                  <el-select v-model="form.aircraftType" placeholder="请选择">
                    <el-option label="B757" value="B757" />
                    <el-option label="A320" value="A320" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="段一">
                  <el-select v-model="form.leg1" placeholder="请选择">
                    <el-option label="1" value="1" />
                    <el-option label="2" value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="段二">
                  <el-select v-model="form.leg2" placeholder="请选择">
                    <el-option label="A" value="A" />
                    <el-option label="B" value="B" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="12">
              <el-col :span="6">
                <el-form-item label="餐车">
                  <el-input v-model="form.cateringCar" placeholder="餐车" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-checkbox v-model="form.flagFinance">财</el-checkbox>
                  <el-checkbox v-model="form.flagMotion">动</el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备注">
                  <el-input v-model="form.remark" placeholder="备注信息" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card header="航班信息">
          <HangBan height="20vh" />
        </el-card>
        <el-card header="配餐明细">
          <PeiCan height="25vh" />
        </el-card>
      </el-splitter-panel>
      <el-splitter-panel>
        <el-card header="单据列表">
          <DanJu  height="10vh"/>
        </el-card>
        <el-card header="航班备注">
          <BeiZhu height="10vh"/>
        </el-card>
        <el-card header="机供品明细">
          <JiGongPin height="21vh"/>
        </el-card>
        <el-card header="高端客户">
          <GaoDuanKehu height="10vh"/>
        </el-card>
      </el-splitter-panel>
    </el-splitter>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import GaoDuanKehu from './tables/GaoDuanKehu.vue'
import JiGongPin from './tables/JiGongPin.vue'
import BeiZhu from './tables/BeiZhu.vue'
import DanJu from './tables/DanJu.vue'
import PeiCan from './tables/PeiCan.vue'
import HangBan from './tables/HangBan.vue'

interface FlightRow {
  id: number
  section: number
  flightNo: string
  routeName: string
  routeCode: string
  settlementUnit: string
  cateringStandard: string
  catering: boolean
  aircraftSupply: boolean
  temp: boolean
  serviceFee: number
  selected?: boolean
}

const form = reactive({
  inboundFlight: '',
  nature: 'domestic',
  flightNo: '',
  airline: '',
  route: '',
  inTime: '',
  depTime: '',
  returnTime: '',
  regNo: '',
  aircraftType: '',
  leg1: '',
  leg2: '',
  cateringCar: '',
  flagFinance: false,
  flagMotion: false,
  remark: ''
})

let idCounter = 1

const initialTableData: FlightRow[] = [
  {
    id: idCounter++,
    section: 1,
    flightNo: '036811',
    routeName: '圳-京',
    routeCode: 'SZX-PEK',
    settlementUnit: '顺丰航空',
    cateringStandard: '顺丰航空 B757 国内 正常',
    catering: true,
    aircraftSupply: false,
    temp: false,
    serviceFee: 200,
    selected: false
  }
]

const tableData = ref<FlightRow[]>(initialTableData)

function addRow() {
  tableData.value.push({
    id: idCounter++,
    section: tableData.value.length + 1,
    flightNo: '',
    routeName: '',
    routeCode: '',
    settlementUnit: '',
    cateringStandard: '',
    catering: false,
    aircraftSupply: false,
    temp: false,
    serviceFee: 0,
    selected: false
  })
}

function removeSelected() {
  const remaining = tableData.value.filter((r) => !r.selected)
  if (remaining.length === tableData.value.length) {
    ElMessage.warning('请先选择要删除的行')
    return
  }
  tableData.value = remaining
}

function onRowChange(row: FlightRow) {
  // You can put additional logic here, like saving immediately or recalculating totals
  console.log('row changed', row)
}
</script>

<style scoped lang="scss">
.flight-info {
  :deep(.el-card) {
    --el-card-padding: 5px;

    .el-card__header{
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }

  .flight-form {
    .el-form-item {
      margin-bottom: 8px;
    }
  }

  .table-actions {
    display: flex;
    gap: 8px;
    padding-bottom: 8px;
  }
}
</style>
